<template>
   <div class="overflow-auto" id="Music" >
      <!-- 缩小化 -->
      <SmallMusic v-if=" MusicState==1"/>
      <!-- 正常 -->
      <div v-if="MusicState==2" class="Back" @click="SETLIST(0)">
        
        <div class="frame blogFont" >
            <!-- 头部 -->
            <MusciHead id="MusciHead" class="flex"/>
            <!-- 内容 -->
            <MusicContent id="MusicContent" />
             <!-- 播放器 -->
             <MusicPlayer id="MusicPlayer" class="flex" v-if="PlayNow!=null"/>

        </div>
        <!-- 列表 -->
        <transition name="toleft" >
              <MusicList id="MusicList" v-if="ListState==1 && Songs"/>
        </transition>
           
      </div>
       
   </div>
</template>
<script>
import { mapActions, mapMutations, mapState } from 'vuex'
import MusciHead from './MusicHead/MusciHead.vue'
import SmallMusic from './SmallMusic/SmallMusic.vue'
import MusicContent from './MusicContent/MusicContent.vue'
import MusicPlayer from './MusicPlayer/MusicPlayer.vue'
import MusicList from './MusicList/MusicList.vue'
  export default 
  {
    components: { SmallMusic, MusciHead, MusicContent, MusicPlayer, MusicList },
     name :'', 
     computed:{
        ...mapState('Music',['MusicState','PlayNow','ListState','Songs']),
     },
    methods: {
        ...mapActions('Music',['getHotSearch','init']),
        ...mapMutations('Music',['SETLIST','PAUSE']),
         async  init_(){
           let res = await this.getHotSearch()
           if(res.code !=200) this.$message.error(res.message)
        }
    },
    mounted() {
      document.body.style.overflow='hidden'
    },
    created(){
        this.init_()
        this.init()
    },
    beforeDestroy(){
       this.PAUSE()
       document.body.style.overflow='auto'
    },
    watch:{
      MusicState(newValue){
        if(newValue == 1 || newValue == 0) document.body.style.overflow='auto'
        else document.body.style.overflow='hidden'
      }
    }
    
  }
</script>

<style scoped lang='less'>
.toleft-enter-active{
    animation: toleft 0.3s linear;
}
.toleft-leave-active{
    animation: toleft 0.3s reverse;
}
@keyframes toleft{
   from{
     transform: translateX(300px);
   }
   to{
     transform: translateX(0px);
   }
}
.frame{
  
    height: 650px;
    min-width: 350px;
    width: 80%;
    max-width: 1000px;
    border-radius: 15px;
    max-height: 90vh;
    background:var(--GeneralBackColor-half);
    overflow: hidden;
    position: relative;
}

// 头部
#MusciHead{
    width: 100%;
    height: 60px;
    background: var(--GeneralBackColor);
    padding: 0 10px;
    box-sizing: border-box;
    justify-content: space-between;
}
// 内容
#MusicContent{
  width: 100%;
  height: calc(100% - 160px);
  overflow: auto;
  margin: 20px 0;
  padding: 0 20px;
  box-sizing: border-box;
}
//播放器
#MusicPlayer{
  width: 100%;
  height: 60px;
  background: var(--GeneralBackColor);
  box-sizing: border-box;
  justify-content: center;
  position: relative;
}
//列表
#MusicList{
     width: 300px;
     height: 100%;
     margin-left: 50px;
     position: absolute;
     right:0px;top: 0;
     background: var(--GeneralBackColor);
     box-shadow: 0 0 5px white;
     z-index: 990;
     padding: 30px 20px;
     box-sizing: border-box;
     overflow: auto;
   }
</style>